<template>
  <div class="btn p-10px box-border border-2 text-sm rounded text-blue-600 bg-light-50 cursor-pointer"
       @click="modalShow = true">
    加入团队
  </div>
  <n-modal v-model:show="modalShow">
    <n-card style="width: 600px">
      <template #header>
        <div class="text-base">加入团队</div>
      </template>
      <div>
        <div class="mb-10px">
          <n-input v-model:value="groupCode" placeholder="请输入团队邀请码"/>
        </div>
      </div>
      <template #action>
        <div class="center~">
          <div class="mr-10px">
            <n-button type="info" @click="onSubmit">确认</n-button>
          </div>
          <n-button type="error" @click="onCancel">取消</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import {NButton, NCard, NInput, NModal, useMessage} from "naive-ui"
import {useBaseStore} from "@/store/base";
import {useAddGroup} from "@/pages/group/hooks/use-add-group";

export default defineComponent({
  name: "AddGroup",
  components: {NModal, NInput, NButton, NCard},
  emits: ["success"],
  setup(props, {emit}) {
    const baseStore = useBaseStore()
    const message = useMessage()
    const modalShow = ref(false)
    const groupCode = ref("")

    async function onSubmit() {
      if (!groupCode.value) {
        message.error("邀请码错误")
        return
      }

      const result = await useAddGroup(groupCode.value, baseStore.userId)
      if (result.code !== 1000) {
        message.error("加入团队失败, 请重新确认邀请码")
      } else {
        message.success("加入团队成功")
        emit("success")
      }
      groupCode.value = ""
    }

    function onCancel() {
      modalShow.value = false
      groupCode.value = ""
    }

    return {
      modalShow,
      groupCode,
      onSubmit,
      onCancel
    }
  }
})
</script>

<style scoped>

</style>